﻿@model Meres.Models.PeopleViewModel
<table class="personSelector" style="width: 100%; height: 100%">
    <tr>
        <td>
            <div class="peopleFilter panelArea">
                <ul class="peopleViewTabIcon customtooltip">
                    <li><a href="#tabs-Category" title="Category options"><span style="background-position: -40px -0px;"
                        class="ekingIcon"></span></a></li>
                    <li><a href="#tabs-Group" title="Group options"><span style="background-position: -20px -0px;"
                        class="ekingIcon"></span></a></li>
                    <li><a href="#tabs-Extra" title="Filter Settings"><span style="background-position: -0px -0px;"
                        class="ekingIcon"></span></a></li>
                </ul>
                <div id="tabs-Category">
                    <ul class="categories">
                        <li class="allItems" data-categoryid="-1">(All)</li>
                        @foreach (var item in Model.Categories)
                        {
                            <li data-categoryId="@item.Id">@item.Name</li>
                        }
                    </ul>
                </div>
                <div id="tabs-Group">
                    tabs-Groups
                </div>
                <div id="tabs-Extra">
                    <div>
                        <h5>Category options
                        </h5>
                        <h5>
                            <input type="checkbox" />client categories
                        </h5>
                    </div>
                    <div>
                        <h5>Group options
                        </h5>
                        <h5>
                            <input type="checkbox" checked="checked" />logged group</h5>
                        <h5>
                            <input type="checkbox" />my right groups</h5>
                        <h5>
                            <input type="checkbox" />all groups</h5>
                    </div>
                </div>
            </div>
        </td>

    </tr>
    <tr>
        <td style="border-top: 5px solid transparent">
            <div class="peopleSelector panelArea">
                <ul class="peopleViewTabIcon customtooltip">
                    <li><a title="All people" href="#tabs-allPeople"><span style="background-position: -109px -0px;"
                        class="ekingIcon"></span></a></li>
                    <li><a title="Mine" href="#tabs-myPeople"><span style="background-position: -128px -0px;"
                        class="ekingIcon"></span></a></li>
                    <li><a title="Recent" href="#tabs-recentPeople"><span style="background-position: -148px -0px;"
                        class="ekingIcon"></span></a></li>
                </ul>
                <div style="position: relative">
                    <span style="width: 18px; height: 18px; float: right; position: absolute; right: 0px;
                        margin: 2px; background-image: url('/Modules/Orchard.jQuery/Styles/images/ui-icons_888888_256x240.png');
                        background-position: -80px -128px; cursor: pointer"
                        class="peopleFilterTextBoxClear"></span>
                    <input type="text" placeholder="type to filter" class="peopleFilterTextBox" />
                </div>
                <div id="tabs-allPeople">
                    <ul class="allPeople peopleList">
                        @{
                            foreach (var item in Model.Persons)
                            {
                            <li data-personid="@item.Id">@item.Name</li>
                            }                        
                        }
                    </ul>
                </div>
                <div id="tabs-myPeople">
                    <ul class="myPeople peopleList">
                        <li>MP1</li>
                        <li>MP2</li>
                    </ul>
                </div>
                <div id="tabs-recentPeople">
                    <ul class="recentPeople peopleList">
                        <li>RP1</li>
                        <li>RP2</li>
                    </ul>
                </div>
            </div>
        </td>
    </tr>
</table>
